<template>
  <!-- 重置密码页面 -->
  <div class="login-container">
    <!-- 重置密码页面是不依托主页的新页面 -->
    <div class="login-content">
      <!-- 左侧 Logo 和标语 -->
      <div class="login-left">
        <div class="brand">
          <img src="@/assets/网盘.png" alt="logo" class="logo" />
          <h1>蜂云盒子</h1>
        </div>
        <p class="slogan">素材共享资源云盘</p>
      </div>

      <!-- 右侧重置密码表单 -->
      <div class="login-right">
        <div class="login-box">
          <h2>重置密码</h2>

          <a-form :model="formState" name="basic" autocomplete="off" @finish="submitFinish">
            <!-- 邮箱 -->
            <a-form-item
              name="email"
              :rules="[
                { required: true, message: '请输入邮箱' },
                { type: 'email', message: '请输入正确的邮箱格式' },
              ]"
            >
              <a-input v-model:value="formState.email" placeholder="请输入绑定的邮箱" size="large">
                <template #prefix>
                  <MailOutlined style="color: rgba(0, 0, 0, 0.45)" />
                </template>
                <template #suffix>
                  <a-tooltip title="忘记或未绑定邮箱，请联系管理员">
                    <QuestionCircleOutlined style="color: rgba(0, 0, 0, 0.45)" />
                  </a-tooltip>
                </template>
              </a-input>
            </a-form-item>

            <!-- 图形验证码 -->
            <a-modal
              v-model:visible="captchaVisible"
              title="请输入验证码"
              @ok="handleCaptchaOk"
              :confirmLoading="captchaLoading"
              okText="确定"
              cancelText="取消"
              centered
            >
              <div class="captcha-container">
                <a-input
                  v-model:value="captchaCode"
                  placeholder="请输入验证码"
                  size="large"
                  style="width: calc(100% - 120px)"
                >
                  <template #prefix>
                    <SafetyOutlined style="color: rgba(0, 0, 0, 0.25)" />
                  </template>
                </a-input>
                <img :src="captchaUrl" alt="验证码" class="captcha-img" @click="refreshCaptcha" />
              </div>
            </a-modal>

            <!-- 邮箱验证码 -->
            <a-form-item
              name="emailCode"
              :rules="[{ required: true, message: '请输入邮箱验证码' }]"
            >
              <div class="verification-code-container">
                <!-- 左侧输入框 -->
                <a-input
                  v-model:value="formState.emailCode"
                  placeholder="请输入邮箱验证码"
                  size="large"
                  class="verification-input"
                />
                <!-- 右侧验证码按钮 -->
                <a-button
                  type="primary"
                  size="large"
                  class="verification-button"
                  @click="handleSendCode"
                >
                  获取验证码
                </a-button>
              </div>
            </a-form-item>

            <!-- 新密码 -->
            <a-form-item
              name="newPassword"
              :rules="[
                { required: true, message: '请输入新密码' },
                { min: 8, message: '密码长度不能小于8位' },
                { max: 20, message: '密码长度不能超过20位' },
              ]"
            >
              <a-input-password
                v-model:value="formState.newPassword"
                placeholder="请输入新密码"
                size="large"
              >
                <template #prefix>
                  <LockOutlined style="color: rgba(0, 0, 0, 0.45)" />
                </template>
              </a-input-password>
            </a-form-item>

            <!-- 确认新密码 -->
            <a-form-item
              name="confirmPassword"
              :rules="[
                { required: true, message: '请确认新密码' },
                { validator: validateConfirmPassword },
              ]"
            >
              <a-input-password
                v-model:value="formState.confirmPassword"
                placeholder="请确认新密码"
                size="large"
              >
                <template #prefix>
                  <LockOutlined style="color: rgba(0, 0, 0, 0.45)" />
                </template>
              </a-input-password>
            </a-form-item>

            <a-form-item>
              <!-- 重置按钮 -->
              <a-button type="primary" html-type="submit" size="large" :loading="loading" block>
                重置密码
              </a-button>
            </a-form-item>
          </a-form>

          <div class="login-footer">
            <router-link to="/user/login" class="register-link">返回登录</router-link>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
  import { reactive, ref, onMounted } from 'vue'
  import {
    MailOutlined,
    LockOutlined,
    QuestionCircleOutlined,
    SafetyOutlined,
  } from '@ant-design/icons-vue'
  import { message } from 'ant-design-vue'
  import { useRouter } from 'vue-router'
  import { sendEmailCodeUsingPost1, resetPasswordUsingPost } from '@/api/gonggonmokuaijiekou'

  const loading = ref(false)
  const router = useRouter()
  const captchaVisible = ref(false)
  const captchaLoading = ref(false)
  const captchaCode = ref('')
  const captchaUrl = ref('/api/checkCode')

  const formState = reactive({
    email: '',
    emailCode: '',
    newPassword: '',
    confirmPassword: '',
  })

  // 刷新图形验证码
  const refreshCaptcha = () => {
    captchaUrl.value = `/api/checkCode?t=${new Date().getTime()}`
  }

  // 初始化倒计时
  onMounted(() => {
    refreshCaptcha()
  })

  // 验证确认密码
  const validateConfirmPassword = async (_rule: any, value: string) => {
    if (value !== formState.newPassword) {
      throw new Error('两次输入的密码不一致')
    }
  }

  // 处理发送验证码
  const handleSendCode = () => {
    if (!formState.email) {
      message.warning('请先输入邮箱')
      return
    }
    captchaVisible.value = true
    refreshCaptcha()
  }

  // 处理图形验证码确认
  const handleCaptchaOk = async () => {
    if (!captchaCode.value) {
      message.warning('请输入图形验证码')
      return
    }

    captchaLoading.value = true
    try {
      const emailRes = await sendEmailCodeUsingPost1({
        checkCode: captchaCode.value,
        email: formState.email,
      })

      if (emailRes.data.code === 200) {
        message.success('验证码已发送到邮箱')
        captchaVisible.value = false
      } else {
        message.warning(emailRes.data.message || '发送失败')
        refreshCaptcha()
      }
    } catch (error: any) {
      message.warning(error.message || '发送验证码失败')
      refreshCaptcha()
    } finally {
      captchaLoading.value = false
    }
  }

  /**
   * 提交表单
   */
  const submitFinish = async () => {
    if (formState.newPassword !== formState.confirmPassword) {
      message.error('两次输入的密码不一致')
      return
    }

    loading.value = true
    try {
      const res = await resetPasswordUsingPost({
        email: formState.email,
        password: formState.newPassword,
        confirmPassword: formState.confirmPassword,
        emailCode: formState.emailCode,
      })

      if (res.data.code === 200) {
        message.success('密码重置成功')
        router.push({
          path: '/user/login',
          replace: true,
        })
      } else {
        message.error(res.data.message || '重置失败')
      }
    } catch (error: any) {
      message.error(error.data.message || '重置失败')
    } finally {
      loading.value = false
    }
  }
</script>

<style scoped>
  .login-container {
    min-height: 100vh;
    background: var(--theme-background);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    transition: all 0.3s ease;
  }

  .login-content {
    display: flex;
    background: var(--theme-surface);
    border-radius: 16px;
    box-shadow: 0 8px 32px var(--theme-shadow);
    overflow: hidden;
    width: 1000px;
    height: 500px;
    border: 1px solid var(--theme-border);
    transition: all 0.3s ease;
  }

  .login-left {
    flex: 0.8;
    background: linear-gradient(135deg, var(--theme-primary) 0%, var(--theme-secondary) 100%);
    padding: 30px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    color: var(--theme-surface);
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
  }

  /* 添加动态主题色变化效果 */
  .login-left::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, 
      var(--theme-primary) 0%, 
      var(--theme-secondary) 50%, 
      var(--theme-success) 100%);
    opacity: 0.8;
    transition: all 0.3s ease;
    z-index: 1;
  }

  .login-left::after {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    right: -50%;
    bottom: -50%;
    background: radial-gradient(circle, 
      rgba(var(--theme-primary-rgb), 0.3) 0%, 
      rgba(var(--theme-secondary-rgb), 0.2) 50%, 
      transparent 100%);
    animation: float 6s ease-in-out infinite;
    transition: all 0.3s ease;
    z-index: 0;
  }

  @keyframes float {
    0%, 100% {
      transform: translateY(0px) rotate(0deg);
    }
    50% {
      transform: translateY(-20px) rotate(180deg);
    }
  }

  .brand {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 24px;
    position: relative;
    z-index: 2;
  }

  .logo {
    width: 70px;
    height: 48px;
    filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.3));
    transition: all 0.3s ease;
  }

  .logo:hover {
    transform: scale(1.05);
    filter: drop-shadow(0 6px 12px rgba(0, 0, 0, 0.4));
  }

  .brand h1 {
    font-size: 32px;
    margin: 0 0 0 -8px;
    font-weight: 600;
    color: var(--theme-surface);
    transition: all 0.3s ease;
    position: relative;
    z-index: 2;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
  }

  .slogan {
    font-size: 18px;
    opacity: 0.9;
    margin-top: 16px;
    color: var(--theme-surface);
    transition: all 0.3s ease;
    position: relative;
    z-index: 2;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
  }

  /* 主题切换时的特殊效果 */
  [data-theme="dark"] .login-left {
    background: linear-gradient(135deg, 
      var(--theme-primary) 0%, 
      var(--theme-secondary) 50%, 
      var(--theme-info) 100%);
  }

  [data-theme="blue"] .login-left {
    background: linear-gradient(135deg, 
      var(--theme-primary) 0%, 
      var(--theme-secondary) 50%, 
      var(--theme-success) 100%);
  }

  [data-theme="green"] .login-left {
    background: linear-gradient(135deg, 
      var(--theme-primary) 0%, 
      var(--theme-secondary) 50%, 
      var(--theme-warning) 100%);
  }

  [data-theme="purple"] .login-left {
    background: linear-gradient(135deg, 
      var(--theme-primary) 0%, 
      var(--theme-secondary) 50%, 
      var(--theme-error) 100%);
  }

  [data-theme="orange"] .login-left {
    background: linear-gradient(135deg, 
      var(--theme-primary) 0%, 
      var(--theme-secondary) 50%, 
      var(--theme-info) 100%);
  }

  [data-theme="pink"] .login-left {
    background: linear-gradient(135deg, 
      var(--theme-primary) 0%, 
      var(--theme-secondary) 50%, 
      var(--theme-success) 100%);
  }

  [data-theme="cyan"] .login-left {
    background: linear-gradient(135deg, 
      var(--theme-primary) 0%, 
      var(--theme-secondary) 50%, 
      var(--theme-warning) 100%);
  }

  [data-theme="red"] .login-left {
    background: linear-gradient(135deg, 
      var(--theme-primary) 0%, 
      var(--theme-secondary) 50%, 
      var(--theme-info) 100%);
  }

  [data-theme="gold"] .login-left {
    background: linear-gradient(135deg, 
      var(--theme-primary) 0%, 
      var(--theme-secondary) 50%, 
      var(--theme-success) 100%);
  }

  .login-right {
    flex: 1.4;
    padding: 32px;
    display: flex;
    align-items: center;
    background: var(--theme-surface);
    transition: background 0.3s ease;
  }

  .login-box {
    width: 100%;
    max-width: 360px;
    margin: 0 auto;
  }

  .login-box h2 {
    font-size: 28px;
    font-weight: 600;
    color: var(--theme-text);
    margin-bottom: 32px;
    transition: color 0.3s ease;
  }

  .login-options {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
  }

  .forgot-link {
    color: var(--theme-primary);
    cursor: pointer;
    transition: color 0.3s ease;
  }

  .forgot-link:hover {
    color: var(--theme-secondary);
  }

  .login-footer {
    margin-top: 24px;
    text-align: center;
    color: var(--theme-textSecondary);
    transition: color 0.3s ease;
  }

  .register-link {
    color: var(--theme-primary);
    margin-left: 8px;
    text-decoration: none;
    transition: color 0.3s ease;
  }

  .register-link:hover {
    color: var(--theme-secondary);
  }

  :deep(.ant-input-affix-wrapper) {
    padding: 8px 11px;
    background: var(--theme-surface);
    border-color: var(--theme-border);
    color: var(--theme-text);
    transition: all 0.3s ease;
  }

  :deep(.ant-input-affix-wrapper:hover) {
    border-color: var(--theme-primary);
  }

  :deep(.ant-input-affix-wrapper-focused) {
    border-color: var(--theme-primary);
    box-shadow: 0 0 0 2px rgba(var(--theme-primary-rgb), 0.2);
  }

  :deep(.ant-input) {
    background: var(--theme-surface);
    color: var(--theme-text);
    transition: all 0.3s ease;
  }

  :deep(.ant-input::placeholder) {
    color: var(--theme-textSecondary);
  }

  :deep(.ant-btn) {
    height: 44px;
    font-size: 16px;
    transition: all 0.3s ease;
  }

  :deep(.ant-btn-primary) {
    background: var(--theme-primary);
    border-color: var(--theme-primary);
    color: var(--theme-surface);
  }

  :deep(.ant-btn-primary:hover) {
    background: var(--theme-secondary);
    border-color: var(--theme-secondary);
  }

  :deep(.ant-alert) {
    border-radius: 4px;
    background: var(--theme-surface);
    border-color: var(--theme-border);
    color: var(--theme-text);
    transition: all 0.3s ease;
  }

  :deep(.ant-input-affix-wrapper-disabled) {
    background-color: var(--theme-background);
    cursor: not-allowed;
    color: var(--theme-textSecondary);
    transition: all 0.3s ease;
  }

  :deep(.ant-input-disabled) {
    background-color: var(--theme-background);
    cursor: not-allowed;
    color: var(--theme-textSecondary);
    transition: all 0.3s ease;
  }

  :deep(.ant-btn-primary[disabled]) {
    background-color: var(--theme-border);
    border-color: var(--theme-border);
    color: var(--theme-textSecondary);
    transition: all 0.3s ease;
  }

  .captcha-container {
    display: flex;
    gap: 8px;
    align-items: center;
  }

  .captcha-img {
    height: 40px;
    width: 112px;
    cursor: pointer;
    border-radius: 4px;
    border: 1px solid var(--theme-border);
    transition: border-color 0.3s ease;
  }

  .captcha-img:hover {
    border-color: var(--theme-primary);
  }

  /* 添加验证码输入框相关样式 */
  :deep(.ant-input-search) {
    .ant-input-search-button {
      height: 40px !important;
      line-height: 40px !important;
    }

    .ant-input-wrapper {
      .ant-input-group-addon {
        padding: 0;

        .ant-btn {
          height: 40px !important;
          line-height: 38px !important;
        }
      }
    }
  }

  /* 确保其他按钮样式不受影响 */
  :deep(.ant-btn:not(.ant-input-search-button)) {
    height: 44px;
    font-size: 16px;
  }

  /* 修改验证码输入区域 */
  .verification-code-container {
    display: flex;
    gap: 8px;
    width: 100%;
  }

  .verification-input {
    flex: 1;
  }

  .verification-button {
    width: 120px !important;
    height: 40px !important;
    padding: 0 8px !important;
    white-space: nowrap;
  }

  /* 确保输入框高度一致 */
  :deep(.verification-input .ant-input) {
    height: 40px;
  }

  /* 修复图标颜色 */
  :deep(.ant-input-prefix .anticon) {
    color: var(--theme-textSecondary) !important;
    transition: color 0.3s ease;
  }

  :deep(.ant-input-prefix .anticon:hover) {
    color: var(--theme-primary) !important;
  }

  /* 修复弹窗样式 */
  :deep(.ant-modal) {
    background: var(--theme-surface);
    color: var(--theme-text);
    transition: all 0.3s ease;
  }

  :deep(.ant-modal-header) {
    background: var(--theme-background);
    border-bottom-color: var(--theme-border);
    transition: all 0.3s ease;
  }

  :deep(.ant-modal-title) {
    color: var(--theme-text);
    transition: color 0.3s ease;
  }

  :deep(.ant-modal-body) {
    background: var(--theme-surface);
    color: var(--theme-text);
    transition: all 0.3s ease;
  }

  :deep(.ant-modal-footer) {
    border-top-color: var(--theme-border);
    transition: all 0.3s ease;
  }

  :deep(.ant-modal-close) {
    color: var(--theme-text);
    transition: color 0.3s ease;
  }

  /* 修复浏览器自动填充状态下的样式问题 */
  /* Webkit浏览器 (Chrome, Safari, Edge) */
  :deep(.ant-input:-webkit-autofill),
  :deep(.ant-input:-webkit-autofill:hover),
  :deep(.ant-input:-webkit-autofill:focus),
  :deep(.ant-input:-webkit-autofill:active) {
    -webkit-box-shadow: 0 0 0 1000px var(--theme-surface) inset !important;
    -webkit-text-fill-color: var(--theme-text) !important;
    background-color: var(--theme-surface) !important;
    background-clip: content-box !important;
    transition: all 0.3s ease !important;
  }

  /* 修复输入框包装器的自动填充样式 */
  :deep(.ant-input-affix-wrapper .ant-input:-webkit-autofill),
  :deep(.ant-input-affix-wrapper .ant-input:-webkit-autofill:hover),
  :deep(.ant-input-affix-wrapper .ant-input:-webkit-autofill:focus),
  :deep(.ant-input-affix-wrapper .ant-input:-webkit-autofill:active) {
    -webkit-box-shadow: 0 0 0 1000px var(--theme-surface) inset !important;
    -webkit-text-fill-color: var(--theme-text) !important;
    background-color: var(--theme-surface) !important;
    background-clip: content-box !important;
    transition: all 0.3s ease !important;
  }

  /* Firefox浏览器 */
  :deep(.ant-input:-moz-autofill),
  :deep(.ant-input:-moz-autofill:focus) {
    background-color: var(--theme-surface) !important;
    color: var(--theme-text) !important;
    transition: all 0.3s ease !important;
  }

  /* 修复密码输入框的自动填充样式 */
  :deep(.ant-input-password .ant-input:-webkit-autofill),
  :deep(.ant-input-password .ant-input:-webkit-autofill:hover),
  :deep(.ant-input-password .ant-input:-webkit-autofill:focus),
  :deep(.ant-input-password .ant-input:-webkit-autofill:active) {
    -webkit-box-shadow: 0 0 0 1000px var(--theme-surface) inset !important;
    -webkit-text-fill-color: var(--theme-text) !important;
    background-color: var(--theme-surface) !important;
    background-clip: content-box !important;
    transition: all 0.3s ease !important;
  }

  /* 确保自动填充状态下的输入框样式与主题一致 */
  :deep(.ant-input[data-autofill="true"]),
  :deep(.ant-input[data-autofill="true"]:hover),
  :deep(.ant-input[data-autofill="true"]:focus) {
    background-color: var(--theme-surface) !important;
    color: var(--theme-text) !important;
    border-color: var(--theme-border) !important;
    transition: all 0.3s ease !important;
  }

  /* 修复自动填充状态下的焦点样式 */
  :deep(.ant-input:-webkit-autofill:focus) {
    border-color: var(--theme-primary) !important;
    box-shadow: 0 0 0 2px rgba(var(--theme-primary-rgb), 0.2) !important;
    transition: all 0.3s ease !important;
  }

  /* 修复自动填充状态下的悬停样式 */
  :deep(.ant-input:-webkit-autofill:hover) {
    border-color: var(--theme-primary) !important;
    transition: all 0.3s ease !important;
  }

  /* 确保所有输入框在自动填充状态下都使用主题颜色 */
  :deep(.ant-input-affix-wrapper .ant-input:-webkit-autofill) {
    -webkit-box-shadow: 0 0 0 1000px var(--theme-surface) inset !important;
    -webkit-text-fill-color: var(--theme-text) !important;
    background-color: var(--theme-surface) !important;
    background-clip: content-box !important;
    transition: all 0.3s ease !important;
  }

  /* 修复自动填充状态下的图标颜色 */
  :deep(.ant-input-affix-wrapper .ant-input:-webkit-autofill ~ .anticon) {
    color: var(--theme-textSecondary) !important;
    transition: color 0.3s ease !important;
  }

  /* 修复自动填充状态下的边框样式 */
  :deep(.ant-input-affix-wrapper:has(.ant-input:-webkit-autofill)) {
    border-color: var(--theme-border) !important;
    transition: all 0.3s ease !important;
  }

  :deep(.ant-input-affix-wrapper:has(.ant-input:-webkit-autofill):hover) {
    border-color: var(--theme-primary) !important;
    transition: all 0.3s ease !important;
  }

  :deep(.ant-input-affix-wrapper:has(.ant-input:-webkit-autofill):focus-within) {
    border-color: var(--theme-primary) !important;
    box-shadow: 0 0 0 2px rgba(var(--theme-primary-rgb), 0.2) !important;
    transition: all 0.3s ease !important;
  }
</style>
